<template>
    <div style="padding:20px 0; ">
        <a-row justify="flex-start">
            <a-col>
                <a-space>
                	<a-button type="danger" ghost @click="newResourceInfo" style="margin-right:10px;">新增</a-button>
	                <a-input v-model:value="search.resourceName" placeholder="资源名称" allowClear style="width:200px;" />
                	<a-button type="primary" ghost @click="getResourceInfos(1)">查询</a-button>
                </a-space>
            </a-col>

        </a-row>
    </div>

    <a-table :columns="columns" :data-source="datasource" :pagination="{
        pageSize: page.pageSize,
        current: page.pageNo,
        total: page.totals,
    }" @change="changeData" :pageSizeOptions="null">
        <template #headerCell="{ column }">
            <div style="text-align:center; color: #08c;">{{ column.title }}</div>
        </template>
        <template #bodyCell="{ column, record, text }">
            <template v-if="column.key === 'action'">
                <div style="text-align:center;">
                    <a-popconfirm title="确定删除? " @confirm="deleteResourceInfo(record)" cancelText="取消" ok-text="确定">
                        <a style="color:red;">删除</a>
                    </a-popconfirm>
                    <a-divider type="vertical" />
                    <a @click="updateResourceInfo(record)" style="color:black;">修改</a>
                    <a-divider type="vertical" />
                    <a @click="browse(record)" style="color:#08c;">查看文件</a>
                </div>
            </template>
            <template v-else>
                <div style="text-align:center;">{{ text }} </div>
            </template>
        </template>
    </a-table>

    <a-modal v-model:visible="visible" v-if="visible" title="ResourceInfo信息" width="50%" 
        cancelText="取消" okText="确定" @ok="handleOk" :bodyStyle="{ overflowY: 'auto' }" :footer="null" destroyOnClose>
        <ftp-user :user="current" @close="closeModal"></ftp-user>
    </a-modal>

</template>

<script>
import { defineComponent, reactive, ref } from 'vue'
import { CheckOutlined, CloseOutlined, InfoCircleOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import Constants from "../utils/Constants";
import Mixins from "../utils/Mixins";
import ResourceInfo from './ResourceInfo.vue';

export default defineComponent({
    components: { CheckOutlined, CloseOutlined, InfoCircleOutlined, ResourceInfo },
    created() {
        this.getResourceInfos(1);
    },
    setup() {

        const that = Mixins().globalProperties

        const search = reactive({
        	resourceName: null,
        	resourceType: null,
        })
        const visible = ref(false);
        const current = ref({})

        const columns = reactive([])
        columns.push({ title: '资源名称', dataIndex: 'resourceName', key: 'resourceName', width: "200px" })
        columns.push({ title: '资源类型', dataIndex: 'resourceType', key: 'resourceType', width: "200px" })
        columns.push({ title: '操作', dataIndex: 'action', key: 'action', width: "300px" })

        const page = reactive({
            pageSize: 10,
            pageNo: 1,
            totals: 0,
            pages: 0,
        })

        let datasource = reactive([])

        const getResourceInfos = async (pageNo) => {
            let url = Constants.resource_infos_url + "/" + pageNo + "?pageSize=" + page.pageSize;
            if (search.resourceName) {
                url += "&resourceName=" + search.resourceName;
            }
            if (search.resourceType) {
                url += "&resourceType=" + search.resourceType;
            }
            const resp = await that.$http.get(url);
            console.log(resp);
            datasource.splice(0, datasource.length)
            if (resp.data && resp.data.code === "01") {
                resp.data.result.content.forEach(element => {
                    datasource.push(element);
                });
                page.pageNo = resp.data.result.pageable.pageNumber + 1;
                page.pageSize = resp.data.result.pageable.pageSize;
                page.pages = resp.data.result.totalPages;
                page.totals = resp.data.result.totalElements;
            }
        }



        const newResourceInfo = () => { 
            visible.value = true;
            current.value = {}
        }

        const updateResourceInfo = (record) => {
            visible.value = true
            current.value = record
        }

        const deleteResourceInfo = async (record) => { 
            let url = Constants.resource_info_url + "/" + record.id;
            const resp = await that.$http.delete(url);
            if (resp.data && resp.data.code === "01") {
                message.success("用户信息删除成功");
                getResourceInfos(page.pageNo);
            } else {
                message.success("用户信息删除失败,请重试");
            }
        }


        const changeData = (data) => {
            page.pageNo = page.pageNo + 1;
            getResourceInfos(data.current);
        }

        const closeModal = () => {
            visible.value = false;
            getResourceInfos(page.pageNo);
        };


        return {
            search,
            current,
            newResourceInfo,
            updateResourceInfo,
            getResourceInfos,
            page,
            datasource,
            columns,
            deleteResourceInfo,
            changeData,
            visible,
            closeModal,
        }
    },
})
</script>

<style lang="less">
.full-modal {
    .ant-modal {
        max-width: 100%;
        top: 0;
        padding-bottom: 0;
        margin: 0;
    }

    .ant-modal-content {
        display: flex;
        flex-direction: column;
        height: calc(100vh);
    }

    .ant-modal-body {
        flex: 1;
    }
}
</style>
